<template>
	<div	class="box">
		<div class="top">
			<el-card class="list-box">
				<span style="font-size: 18px;margin-right: 15px;">笔记列表</span>
				<span style="color: gray;margin-right: 5px;">视频笔记</span>
				<span style="color: gray;font-size: 12px;margin-right: 5px;">共0篇</span>
			</el-card>
		</div>
		<div class="bottom">
		<el-card class="wd-box">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="我的笔记" name="first">
					<div class="tab-box">
						<img src="@/assets/no_data.png" alt="">
						<span>快去看视频文章笔记~</span>
					</div>
				</el-tab-pane>
				<el-tab-pane label="公开笔记" name="second">
					<div class="tab-box">
						<img src="@/assets/no_data.png" alt="">
						<span>您还没有发布过笔记哦，快去发布一篇吧</span>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-card>

		</div>
</div>
</template>

<script>
export default {
	name: 'FrontendVue2Biji',

	data() {
		return {
			activeName: 'second',
		};
	},

	mounted() {
		
	},

	methods: {
		handleClick(tab, event) {
        console.log(tab, event);
      }
	},
};
</script>

<style lang="less" scoped>
.box{
	width: 100%;
	height:860px ; 
	.top{
		width: 100%;
		height: 100px;
		margin-top: 20px;

		.list-box{
			width: 60%;
			height: 80px;
			margin: 0 auto;
			border-radius: 15px;
			display: flex;
			align-items: center;
		}
	}
	.bottom{
		width: 100%;
		height: 100%;
		.wd-box{
			width: 60%;
			height: 100%;
			margin: 0 auto;
			border-radius: 15px;
		}
	}
}
.tab-box{
	width: 100%;
	height: 600px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	img{
		width: 300px;
	}
}
</style>